<template>
  <div class="component-upload-image">
    <el-upload
      :action="uploadImgUrl"
      class="upload-demo"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :on-remove="handleRemove"
      :on-change="changeUpload"
      on-progress="progress"
      :limit="1"
      :data="uploadData"
      :file-list="fileList">
      <el-button size="small">修改图片</el-button>
      <div slot="tip" class="el-upload__tip"></div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { getUploadToken } from "@/api/monitor/file";
import { updateWaChatImg } from "@/api/applet/broadcastGood";
export default {
  data() {
    return {
      dialogVisible: false,
      uploadImgUrl: "https://upload-z2.qiniup.com",
      upload_domain: "",
      uploadData: { token: "", key: "" },
      fileList: [],

    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  methods: {
    removeImage() {
      this.$emit("input", "");
    },
    handleUploadSuccess(res) {
     var img =  this.upload_domain + res.key;
      console.log(img)
      updateWaChatImg(img).then((response) => {
        this.$emit("update:imageStr",response.data.media_id);
        this.$emit("update:imageurl",img);
      });
    },
    handleBeforeUpload() {
      let _self = this;
      return new Promise((resolve, reject) => {
        getUploadToken()
          .then((response) => {
            _self.uploadData.key = response.data.key;
            _self.uploadData.token = response.data.token;
            _self.upload_domain = response.data.domain;
            resolve(true);
          })
          .catch((err) => {
            console.log("出错了...", err);
            reject(false);
          });
      });
    },
    onProgressUpdate(event, file, fileList) {
      this.imgFlag = true;
      this.percent = Math.floor(event.percent);
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
    handleRemove(file, fileList) {
      this.$emit("update:imageStr", null);
      this.$emit("update:imageurl", null);
    },
    changeUpload(file, fileList) {
      this.isUpload = 1
      const isImage = file.raw.type === 'image/png' || file.raw.type === 'image/jpg' || file.raw.type === 'image/jpeg'
      const isLt5M = file.size < 1024 * 1024 * 1
      if (!isImage) {
        this.$message.error('上传只能是png,jpg,jpeg格式!')
        this.forbidUpload = false
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过1M!')
        this.forbidUpload = false
      }

      if (isImage && isLt5M) {
        this.forbidUpload = true
        // this.uploadFile = file.raw || null
      } else {
        fileList.splice(-1, 1)
      }
    }
  },
  watch: {},
};
</script>

<style scoped lang="scss">
  .el-image{
    height: 100%;
  }
.image {
  position: relative;
  width: 100%;
  height: 100%;
  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
  }
  &:hover .mask {
    opacity: 1;
  }
}
.el-upload-list__item {
  transition: none !important;
}
.el-icon-mask{
  font-size: 20px;
  margin-right: 5px;
}
.el-icon-plus {
  font-size: 20px;
}
</style>
